const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone6 = devices['iPhone 6'];

(async () => {
    const url = 'https://h5.ele.me/msite/'

    console.log('启动浏览器');
    const browser = await puppeteer.launch({
        // 关闭无头模式，方便我们看到这个无头浏览器执行的过程
        headless: false,
    });

    console.log('打开页面');
    const page = await browser.newPage();

    // 模拟 iPhone6
    await page.emulate(iPhone6);

    console.log('地址栏输入网页地址');
    await page.goto(url);

    console.log('等待页面准备好');
    // 这里判断地比较粗暴
    await page.waitFor(3000);
    await page.tap('.index-2uW_v_0');
    await page.waitFor(800);
    await page.type('.index-2V7cn_0', '中关村软件园孵化器', {delay: 800});
    await page.waitFor(800);
    await page.tap('.index-3NnY9_0 section .AddressCell-2WCnC_0');

    await page.waitForSelector('.foodentry');
    await page.waitFor(500);
    await page.waitForSelector('.shoplist');
    await page.waitFor(500);
    await page.waitForSelector('.search-wrapper .search');

    console.log('点击搜索框');
    await page.waitFor(500);
    await page.tap('.search-wrapper .search');
    await page.waitFor(800);
    await page.waitForSelector('input[type="search"]');

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(800);

    console.log('输入食物');
    await page.type('.app-11zxJ_1', '肯德基', {
        delay: 600, // 每个字母之间输入的间隔
    });

    console.log('回车开始搜索');
    // await page.press('Enter');
    await page.tap('button');

    console.log('等待搜素结果渲染出来');
    await page.waitForSelector('[class^="index-container"]');

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(2000);

    console.log('找到搜索到的第一家外卖店！');
    await page.tap('[class^="index-container"]');

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(2000);

    console.log('等待菜单渲染出来');
    // await page.waitForSelector('[class^="menuview-menuList_JqDMu"]');

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(2000);

    console.log('直接选一个菜品吧');
    await page.tap('[class^="cartbutton-entitybutton"] a');

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(4000);

    console.log('等待加入购物车成功');
    await page.waitForSelector('[class^="bottomNav-cartfooter"]');

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(2000);

    console.log('点到了，把按钮变红以表高兴！');
    await page.evaluate(() => {
        document.querySelector('[class^="submit-btn-submitbutton"]').style.backgroundColor = 'red';
        return true;
    });

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(2000);

    console.log('检查购物车！');
    await page.tap('[class^="bottomNav-carticon"]');

    // console.log('===为了看清楚，傲娇地等两秒===');
    await page.waitFor(2000);
    await page.tap('[class^="submit-btn-submitbutton"]');

    console.log('好了，到这里需要登录才能继续下单，演示到此结束啦！');
    console.log('5秒后关闭浏览器');
    await page.waitFor(5000);
    await browser.close();
})();
